<template>
  <a-form-model
    ref="form"
    :model="form"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
    :hideRequiredMark="true"
  >
    <a-row>
      <a-col :span="12">
        <a-form-model-item label="银行：" prop="bank" style="margin-left:-65px">
          <a-radio-group v-model="form.bank">
            <a-radio :value="item.value" v-for="item in banks" :key="item.text">
              {{ item.text }}
            </a-radio>
            <a-input style="width:120px" v-model="others" :disabled="form.bank != '其他'" />
          </a-radio-group>
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="8">
        <a-form-model-item label="金额：">
          <m-input-number :value="total" disabled style="width:200px" />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="货币：">
          <a-input style="width:120px" :value="currency" disabled />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="律师：">
          <a-input style="width:120px" v-model="lawyerName" disabled />
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="8">
        <a-form-model-item label="汇款日期：" prop="remittanceDate">
          <a-date-picker v-model="form.remittanceDate" />
        </a-form-model-item>
      </a-col>
    </a-row>
    <div class="flex justify-center">
      <a-button class="mr-3" @click="$emit('cancel')">
        上一步
      </a-button>
      <a-button c type="primary" @click="next">
        下一步
      </a-button>
    </div>
  </a-form-model>
</template>
<script>
import { banks } from '@/dict'
import { commonRule, dateRule } from '@/utils/rules'
export default {
  name: 'secondStep',
  props: ['selectedRows'],
  data() {
    return {
      banks,
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      others: '',
      form: {
        bank: 'HSBC',
        amount: '',
        currency: '',
        lawyerName: '',
        lawyerId: '',
        remittanceDate: ''
      },
      rules: {
        bank: commonRule,
        remittanceDate: dateRule
      }
    }
  },
  computed: {
    lawyerName() {
      return this.selectedRows?.[0]?.lawyerName
    },
    currency() {
      return this.selectedRows?.[0]?.currency
    },
    total() {
      let rows = this.selectedRows || []
      return rows.reduce((cur, pre) => {
        return (cur += pre.amount)
      }, 0)
    }
  },
  methods: {
    next() {
      this.$refs.form.validate(vaild => {
        const form = Object.assign({}, this.form)
        if (vaild) {
          form.amount = this.total
          form.currency = this.currency
          form.lawyerName = this.lawyerName
          form.lawyerId = this.selectedRows?.[0]?.lawyerId
          form.remittanceDate = Number(form.remittanceDate.startOf('day').format('X'))
          this.$emit('submit', form)
        }
      })
    }
  }
}
</script>
<style lang="css" scoped></style>
